<template>
	<view class="measure-header">
		<view class="header">
			<view class="header-left">
				<view class="header-left-top">
					<view class="header-left-top-title">体重</view>
					<view class="header-left-top-value">{{ realTimeWeight || '0.0' }}</view>
					<view class="header-left-top-unit">{{ unit }}</view>
				</view>
				<view class="header-left-bottom">
					<view class="header-left-bottom-title">身高</view>
					<view class="header-left-bottom-value">{{ realTimeHeight || '0.0' }}</view>
					<view class="header-left-bottom-unit">cm</view>
				</view>
			</view>
			<view class="header-right">
				<view class="header-right-top">
					<view class="header-right-top-title">体脂率</view>
					<view class="header-right-top-value">{{ score || '0.0' }}</view>
					<view class="header-right-top-unit">%</view>
				</view>
				<view class="header-right-bottom">
					<view class="header-right-bottom-title">{{ bleState }}</view>
					<view class="header-right-bottom-value">
						<image class="header-right-bottom-value-img" :animation="animationData"
							@transitionend="transitionend" src=""
							@tap="onClickRestartScan"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<image class="image" src=""></image>
			<text class="text" :style="{color: themeColor}">云康宝测体脂</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			themeColor: {
				type: String,
				default: "#01ca9e",
			},
			bleState: {
				type: String,
				default: "空闲"
			},
			realTimeWeight: {
				type: Number,
				default: 0
			},
			realTimeHeight: {
				type: Number,
				default: 0
			},
			state: {
				type: String,
				default: "paused"
			},
			score: {
				type: String,
				default: "0"
			},
			hideNameDes: {
				type: Boolean,
				default: false
			},
			unit: {
				type: String,
				default: 'kg'
			}
		},
		data() {
			return {
				measure_time_string: "",
				time_string: "",
				animationData: {}
			};
		},
		methods: {
			onClickRestartScan() {
				let animation = uni.createAnimation({
					duration: 800,
					timingFunction: "ease-out"
				});
				animation.rotate(360).step();
				this.animationData = animation.export();
				this.$emit("restart");
			},
			transitionend() {
				let animation = uni.createAnimation({
					duration: 0
				});
				animation.rotate(0).step();
				this.animationData = animation.export();
			}
		}
	};
</script>

<style>
	/* 这里添加从MeasureHeader.wxss转换过来的样式 */
	/* 注意：uni-app中样式默认是scoped的，如果需要全局样式，需要添加:global前缀 */
</style>